<route lang="json5">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '商品详情',
  },
}
</route>
<template>
  <view class="container" v-for="item in prod" :key="item.id">
    <view class="flex justify-between mx-2 mt-2">
      <view @click="goBackPage">
        <!-- <wd-img :width="100" :height="100" :src="joy" /> -->
        <wd-img :width="24" :height="24" src="/static/images/ic_back.png" alt="" />
      </view>

      <wd-img
        :width="24"
        :height="24"
        src="/static/images/ic_share.png"
        alt=""
        @click="showPanel = true"
      />
    </view>
    <wd-action-sheet v-model="showPanel" :panels="panels" cancel-text="取消" custom-class="mb14!" />
    <swiper
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="500"
      class="sweiper"
    >
      <swiper-item v-for="item in prod" :key="item.id">
        <wd-img :src="item.image" :width="400" :height="300" />
      </swiper-item>
    </swiper>
    <view class="product-info">
      <view class="product-price" v-for="item in prod" :key="item.id">￥{{ item.price }}</view>
      <view class="product-title" v-for="item in prod" :key="item.id">
        {{ item.title }}
      </view>
      <view class="product-info-icon">
        <view class="box1">
          <wd-img class="image" src="/static/images/ic_bar_share.png" mode="aspectFit" />
          <text class="text3">分享</text>
        </view>
        <view class="box1">
          <wd-img class="image" src="/static/images/background.png" mode="aspectFit" />
          <text class="text3">收藏</text>
        </view>
        <view class="box1">
          <wd-img class="image" src="/static/images/ic_price.png" mode="aspectFit" />
          <text class="text3">降价通知</text>
        </view>
      </view>
    </view>
    <view class="yixuan">
      <text class="xuan">已选</text>
      <text class="yanse">深邃黑 8+128G 4G全网通 官方标配x1</text>
      <wd-img class="smallIcon-point" src="/static/images/ic_point.png" alt="" />
    </view>

    <view class="product-serve">
      <!-- 收货地址提示 -->
      <view class="delivery">
        <text class="prompt-text">送至</text>
        <wd-img
          class="location-icon"
          src="/static/images/ic_send.png"
          mode="aspectFit"
          :width="20"
          :height="20"
        />
        <text class="address-text">请选择您的收货地址</text>
        <wd-img class="smallIcon-point" src="/static/images/ic_point.png" alt="" />
      </view>

      <!-- 服务信息 -->
      <view class="service-info">
        <view class="text1">
          <text>服务</text>
        </view>
        <view class="right">
          <view class="box2">
            <wd-img
              class="checkmark-icon"
              src="/static/images/ic_supplying.png"
              mode="aspectFit"
              :width="20"
              :height="20"
            />
            <text class="text2">免运费（请以提交订单时为准）</text>
          </view>
          <view class="box2">
            <wd-img
              class="checkmark-icon"
              src="/static/images/ic_supplying.png"
              mode="aspectFit"
              :width="20"
              :height="20"
            />
            <text class="text2">店铺发货 & 售后</text>
          </view>
          <view class="box2">
            <wd-img
              class="checkmark-icon"
              src="/static/images/ic_supplying.png"
              mode="aspectFit"
              :width="20"
              :height="20"
            />
            <text class="text2">7天无理由退货</text>
          </view>
        </view>
      </view>
    </view>
    <view class="product-comment">
      <view class="comment-title">
        <text class="text4">用户评价（2万+）</text>
        <view class="textright">
          <text class="text5">98%</text>
          <text class="text6">好评</text>
        </view>
      </view>
      <view class="comment-item">
        <view class="comment-content">
          <view class="top">
            <wd-img class="user-icon" src="/static/images/ic_person.png" mode="scaleToFill" />
            <view class="comment-info">
              <text class="text4">158****3774</text>
              <view class="star">★ ★ ★ ★ ★</view>
            </view>
          </view>
          <text>商品描述相符合！正品</text>
        </view>
        <view class="comment-item">
          <view class="comment-content">
            <view class="top">
              <wd-img class="user-icon" src="/static/images/ic_person.png" mode="scaleToFill" />
              <view class="comment-info">
                <text class="text4">158****3774</text>
                <view class="star">★ ★ ★ ★ ★</view>
              </view>
            </view>
            <text>和描述相符合，做工精致，颜色好看，原装正品。</text>
          </view>
        </view>
      </view>
      <button class="more-comment-btn">查看更多评价</button>
    </view>
    <view class="product-images" v-for="item in prod" :key="item.id">
      <wd-img :src="item.image" mode="widthFix" class="w-full" />
    </view>
    <view class="anniu">
      <view class="uni-tab__cart-box" flex>
        <view class="uni-tab__cart-button-left">
          <wd-img class="home" src="/static/images/ic_home.png" alt="" />
          <text class="text7">客服</text>
        </view>
        <view class="uni-tab__cart-button-left">
          <wd-img class="home" src="/static/images/ic_shopping_cart.png" alt="" />
          <text class="text7">购物车</text>
        </view>
        <view class="uni-tab__right">
          <wd-img class="background" src="/static/images/btn_background.png" alt="" />
        </view>
        <text class="text8">加入购物车</text>
        <text class="text9" @click="toBuy">立即购买</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import image1 from '@/static/images/product001.png'
const toBuy = () => {
  uni.navigateTo({
    url: '/pages/order-confirm/order-confirm',
  })
}
const goBackPage = () => {
  uni.navigateBack()
}

const selectedCategory = ref(0)
const prod = reactive([
  {
    id: 1,
    image: image1,
    title: ' 【XXXX40 Pro】 XXXX Pro 5G手机',
    category: 'shouji',
    isChecked: false,
    number: 0,
    price: 1299,
    style: '黑曜色,8G+256G',
    tags: ['退货运费险', '超400人加入购', '按压发声发光'],
    images: [image1],
    sales: 100,
    options: [
      {
        name: '零一款',
        image: image1,
        price: 8888,
        originalPrice: 39,
      },
      {
        name: '利维款',
        image: image1,
        price: 4656,
        originalPrice: 39,
      },
      {
        name: '时王款',
        image: image1,
        price: 6666,
        originalPrice: 39,
      },
    ],
  },
])

const showPanel = ref(false)
const panels = [
  [
    {
      iconUrl:
        'https://image12.360buyimage.com/imagetools/jfs/t1/122016/33/6657/1362/5f0692a1E8708d245/e47299e5945a6956.png',
      title: '微信好友',
    },
    {
      iconUrl:
        'https://image14.360buyimage.com/imagetools/jfs/t1/111572/11/11734/1245/5f0692a1E39d13d21/b35dfe9243bd6c2a.png',
      title: '微信朋友圈',
    },
    {
      iconUrl:
        'https://image14.360buyimage.com/imagetools/jfs/t1/132639/25/4003/945/5f069336E18778248/fa181913030bed8a.png',
      title: 'QQ好友',
    },
    {
      iconUrl:
        'https://image14.360buyimage.com/imagetools/jfs/t1/134807/4/3950/1256/5f069336E76949e27/d20641da8e699f07.png',
      title: '微信收藏',
    },
  ],
  [
    {
      iconUrl:
        'https://image14.360buyimage.com/imagetools/jfs/t1/132639/25/4003/945/5f069336E18778248/fa181913030bed8a.png',
      title: 'QQ好友',
    },
    {
      iconUrl:
        'https://image14.360buyimage.com/imagetools/jfs/t1/134807/4/3950/1256/5f069336E76949e27/d20641da8e699f07.png',
      title: '微信收藏',
    },
    {
      iconUrl:
        'https://image12.360buyimage.com/imagetools/jfs/t1/122016/33/6657/1362/5f0692a1E8708d245/e47299e5945a6956.png',
      title: '微信好友',
    },
  ],
]
</script>

<style lang="scss" scoped>
.product-info {
  position: relative;
  top: 1.875rem;
  height: 5rem;
  padding: 15px;
  margin: 0.46875rem;
  background-color: #fff;
  border-radius: 0.78125rem;
}
.product-info-icon {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.product-price {
  font-size: 18px;
  font-weight: 700;
  color: red;
}
.product-title {
  font-size: 0.9375rem;
  color: #000;
}
.box1 {
  display: flex;
  align-items: center;
  margin: 0.3125rem;
  margin-top: 23px;
}
.text3 {
  margin-left: 0.625rem;
  font-size: 0.7125rem;
  color: #676767;
}

.yixuan {
  position: relative;
  top: 1.875rem;
  display: flex;
  align-items: center;
  height: 1.25rem;
  padding: 15px;
  margin: 0.46875rem;
  background-color: #fff;
  border-radius: 0.78125rem;
}
.xuan {
  font-size: 0.9375rem;
  font-weight: 700;
}
.yanse {
  margin-left: 1.25rem;
  font-size: 0.825rem;
  color: #676767;
}
.delivery {
  display: flex;
  align-items: center;
  height: 1.875rem;
}
.smallIcon-point {
  position: absolute;
  right: 5px;
  width: 0.7375rem;
  height: 0.9375rem;
}
.product-serve {
  position: relative;
  top: 1.875rem;
  height: 7.8125rem;
  padding: 15px;
  margin: 0.46875rem;
  background-color: #fff;
  border-radius: 0.78125rem;
}
.right {
  display: flex;
  flex-direction: column;
}
.box2 {
  display: flex;
  align-items: center;
  margin-bottom: 0.625rem;
}
.checkmark-icon {
  width: 1.09375rem;
  height: 1.09375rem;
  margin-left: 0.9375rem;
}
.text1 {
  font-weight: 700;
}
.text2 {
  margin-left: 0.9375rem;
  font-size: 0.84375rem;
  font-weight: 700;
}
.location-icon {
  width: 1.09375rem;
  height: 1.09375rem;
  margin-left: 0.9375rem;
}

.prompt-text {
  font-weight: 700;
}

.address-text {
  margin-left: 0.9375rem;
  font-size: 0.84375rem;
  color: #676767;
}

.service-info {
  display: flex;
  margin-top: 0.78125rem;
}

.service-item {
  display: flex;
  margin-top: 0.78125rem;
}

.product-comment {
  position: relative;
  top: 1.875rem;
  height: 17.1875rem;
  padding: 15px;
  margin: 0.46875rem;
  background-color: #fff;
  border-radius: 0.78125rem;
}
.comment-title {
  display: flex;
  justify-content: space-between;
  padding: 0 0.625rem;
}
.comment-content {
  padding: 0.625rem 0.46875rem;
  font-size: 0.8125rem;
  color: #333;
}
.text4 {
  font-weight: 700;
}
.textright {
  font-size: 0.78125rem;
}
.text5 {
  font-size: 0.78125rem;
  font-weight: 700;
  color: red;
}
.text6 {
  font-size: 0.88125rem;
  color: #676767;
}
.comment-item {
  margin-bottom: 1.25rem;
}
.top {
  display: flex;
}
.user-icon {
  width: 2.65625rem;
  height: 2.65625rem;
  margin-right: 0.625rem;
  margin-bottom: 0.625rem;
  border-radius: 50%;
}
.comment-info {
  display: flex;
  flex-direction: column;
}
.star {
  color: #fa0;
}
.more-comment-btn {
  width: 7.8125rem;
  height: 2.1875rem;
  margin-top: -0.9375rem;
  font-size: 0.875rem;
  border: 0.03125rem solid #000;
  border-radius: 1.25rem;
}
.product-images {
  position: relative;
  top: 1.875rem;
  height: 17.1875rem;
  padding: 15px;
  margin: 0.46875rem;
  background-color: #fff;
  border-radius: 0.78125rem;
}
.sweiper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  margin-bottom: 20px;
}

.sweiper {
  position: relative;
  left: 50%;
  transform: translate(-50%);
}
.anniu {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  text-align: center;
}
.uni-tab__cart-box {
  z-index: 900;
  flex: 1;
  height: 50px;
  background-color: #fff;
}
.flex {
  display: flex;
  flex-direction: row;
}
.uni-tab__cart-button-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 20px;
  cursor: pointer;
}
.home {
  width: 1.5rem;
  height: 1.5rem;
}
.text7 {
  margin-top: 3px;
  font-size: 12px;
  color: #646566;
}
.uni-tab__right {
  margin: 5px 10px 5px 0;
  overflow: hidden;
  border-radius: 100px;
}
.background {
  position: absolute;
  right: 0.825rem;
  width: 13.9375rem;
  height: 2.4rem;
}
.text8 {
  position: relative;
  left: 3.3rem;
  z-index: 999;
  margin-top: 0.91875rem;
  margin-left: -1.875rem;
  font-size: 0.875rem;
  color: #fff;
}
.text9 {
  position: relative;
  left: 8rem;
  z-index: 999;
  margin-top: 0.91875rem;
  margin-left: -1.875rem;
  font-size: 0.875rem;
  color: #fff;
}
</style>
